// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { StyleMetrics } from "std-widgets.slint";

component SideBarItem inherits Rectangle {
    callback clicked <=> touch.clicked;
    in-out property<string> text <=> label.text;
    in property<bool> selected;
    in property<bool> has-focus;

    min-height: l.preferred-height; 

    state := Rectangle {  
        opacity: 0;
        background: StyleMetrics.window-background;

        animate opacity { duration: 150ms; }
    }
    
    l := HorizontalLayout {  
        y: (parent.height - self.height) / 2;
        padding: StyleMetrics.layout-padding;
        spacing: 0px;

        label := Text {
            color: StyleMetrics.default-text-color;
            vertical-alignment: center;
         }
    }

    touch := TouchArea {
        width: 100%;
        height: 100%;
    }

    states [  
        pressed when touch.pressed : {
            state.opacity: 0.8;
        }
        hover when touch.has-hover : {
            state.opacity: 0.6;
        }
        selected when root.selected : {
            state.opacity: 1;
        }
        focused when root.has-focus : {
            state.opacity: 0.8;
        }
    ]
}

export component SideBar inherits Rectangle {
    in property<[string]> model: [];
    out property<int> current-item: 0;
    in property<string> title <=> label.text;
    out property<int> current-focused: fs.has-focus ? fs.focused-tab : -1; // The currently focused tab
    width: 180px;

    forward-focus: fs;

    accessible-role: tab;
    accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;

    Rectangle {  
        background: StyleMetrics.window-background.darker(0.2);

        fs := FocusScope {
            x:0;
            width: 0px; // Do not react on clicks
            property<int> focused-tab: 0;
    
            key-pressed(event) => {
                if (event.text == "\n") {
                     root.current-item = root.current-focused;
                     return accept;
                }
                if (event.text == Key.UpArrow) {
                     self.focused-tab = Math.max(self.focused-tab - 1,  0);
                     return accept;
                }
                if (event.text == Key.DownArrow) {
                     self.focused-tab = Math.min(self.focused-tab + 1, root.model.length - 1);
                     return accept;
                }
                return reject;
            }
    
            key-released(event) => {
                if (event.text == " ") {
                     root.current-item = root.current-focused;
                     return accept;
                }
                return reject;
            }
        }
    }
   
    VerticalLayout {      
        padding-top: StyleMetrics.layout-padding;
        padding-bottom: StyleMetrics.layout-padding;
        spacing: StyleMetrics.layout-spacing;
        alignment: start;

        label := Text {
            font-size: 16px;
            horizontal-alignment: center;
        }

        navigation := VerticalLayout { 
            alignment: start;
            vertical-stretch: 0; 
            for item[index] in root.model : SideBarItem {
                has-focus: index == root.current-focused;
                text: item;
                selected: index == root.current-item;
                clicked => { root.current-item = index; }
            }
        }

        VerticalLayout {  
            bottom := VerticalLayout {  
                padding-left: StyleMetrics.layout-padding;
                padding-right: StyleMetrics.layout-padding;

                @children
             }
        }    
    }
}
